<template>
    <div class="container">
        <!-- 图片容器（需明确尺寸） -->
        <div ref="imgContainer" class="img-container">
            <img v-if="processedImage" :src="processedImage" class="preview-circle" />
            <img v-else ref="targetImg" :src="imgYuanUrl" class="cover-img" @load="handleImageLoad" crossorigin="anonymous" />
        </div>
        <!-- <button @click="processImage">裁剪并下载圆形图片</button>
        <img v-if="processedImage" :src="processedImage" class="preview-circle" /> -->
    </div>
</template>
<script setup>
import {ref} from "vue";

// const imgUrl = ref('https://example.com/your-image.jpg');
const imgYuanUrl = ref("");
const props = defineProps({
    imgUrl: {
        type: String,
        default: "",
    },
});
imgYuanUrl.value = props.imgUrl;

const targetImg = ref(null);
const imgContainer = ref(null);
const processedImage = ref("");

// 图片加载完成后触发处理
const handleImageLoad = () => {
    console.log("图片已加载，可进行操作");
    processImage();
};

// 核心方法：处理并生成圆形图片
const processImage = () => {
    if (!targetImg.value || !imgContainer.value) return;

    const container = imgContainer.value;
    const img = targetImg.value;

    // 获取容器和图片的尺寸
    const containerWidth = container.offsetWidth;
    const containerHeight = container.offsetHeight;
    const imgNaturalWidth = img.naturalWidth;
    const imgNaturalHeight = img.naturalHeight;

    // 计算 object-fit: cover 的裁剪区域
    const containerRatio = containerWidth / containerHeight;
    const imgRatio = imgNaturalWidth / imgNaturalHeight;
    let sx, sy, sw, sh;

    if (imgRatio > containerRatio) {
        // 横向裁剪（左右切）
        sw = imgNaturalHeight * containerRatio;
        sh = imgNaturalHeight;
        sx = (imgNaturalWidth - sw) / 2;
        sy = 0;
    } else {
        // 纵向裁剪（上下切）
        sw = imgNaturalWidth;
        sh = imgNaturalWidth / containerRatio;
        sx = 0;
        sy = (imgNaturalHeight - sh) / 2;
    }

    // 创建Canvas并绘制圆形
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    // 设置Canvas尺寸为容器大小
    canvas.width = containerWidth;
    canvas.height = containerHeight;

    // 创建圆形裁剪路径
    ctx.beginPath();
    ctx.arc(
        containerWidth / 2, // 圆心X
        containerHeight / 2, // 圆心Y
        Math.min(containerWidth, containerHeight) / 2, // 半径
        0,
        Math.PI * 2
    );
    ctx.closePath();
    ctx.clip(); // 应用裁剪区域

    // 绘制处理后的图片
    ctx.drawImage(
        img,
        sx,
        sy,
        sw,
        sh, // 源图片裁剪区域
        0,
        0,
        containerWidth,
        containerHeight // Canvas绘制区域
    );

    // 导出为Base64
    processedImage.value = canvas.toDataURL("image/png");
    // imgYuanUrl.value == canvas.toDataURL("image/png");

    downloadImage(canvas);
};

// 下载图片
const downloadImage = (canvas) => {
    const link = document.createElement("a");
    link.download = "circle-image.png";
    link.href = canvas.toDataURL("image/png");
    link.click();
};
</script>

<style scoped>
.img-container {
    width: 100%; /* 容器尺寸 */
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 50%; /* 仅用于页面显示，不影响实际截图 */
}
.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.preview-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
</style>
